import React, { useEffect } from 'react'
import { MobileOutlined, LockOutlined } from '@ant-design/icons'
import { Form, Input, Button, Checkbox, message } from 'antd'
import { useHistory } from 'react-router-dom'
import './index.css'
import { login } from '../../api/user'

const Login = () => {
  const history = useHistory()

  useEffect(() => {
    init()
  }, [])

  const init = () => {
    document.title = '用户登录'
  }
  
  const submitForm = async(values) => {
    const { data } = await login(values)
    const { Msg, Result, Status } = data
    if (Status === 200) {
      const { Sign } = Result
      localStorage.setItem('token', Sign)
      history.push('/sale-list')
      return
    }
    message.error(Msg)
  }

  return (
    <div className="fixed flex flex-center login">
      <div className="antd-pro-layouts-user-layout-header">
        <img className="antd-pro-layouts-user-layout-logo" src="https://preview.pro.ant.design/static/logo.f0355d39.svg" alt="" />
        <span className="antd-pro-layouts-user-layout-title">后台管理系统</span>
      </div>
      <Form
        name="normal_login"
        className="login-form"
        initialValues={{ remember: true }}
        onFinish={submitForm}
      >
        <Form.Item
          name="username"
          rules={[{ required: true, message: '请输入账号' }]}
        >
          <Input
            prefix={<MobileOutlined className="site-form-item-icon" />}
            placeholder="账号："
            size="large"
          />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[{ required: true, message: '请输入密码' }]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="密码："
            size="large"
          />
        </Form.Item>
        <Form.Item>
          <Form.Item name="remember" valuePropName="checked" noStyle>
            <Checkbox>自动登录</Checkbox>
          </Form.Item>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" size="large" className="login-form-button">登录</Button>
        </Form.Item>
      </Form>
    </div>
  )
}

export default Login